React useState: ஸ்டேட் ஹூக்கை மேம்படுத்துவதற்கான உத்திகளில் தேர்ச்சி பெறுதல்

useState ஹூக் என்பது React-ல் காம்பொனென்ட் ஸ்டேட்டை நிர்வகிப்பதற்கான ஒரு அடிப்படைக் கட்டுமானப் பொருளாகும். இது மிகவும் பல்துறை மற்றும் பயன்படுத்த எளிதானது என்றாலும், முறையற்ற பயன்பாடு செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும், குறிப்பாக சிக்கலான செயலிகளில். இந்த விரிவான வழிகாட்டி, உங்கள் React செயலிகள் செயல்திறன் மிக்கதாகவும் பராமரிக்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்ய useState-ஐ மேம்படுத்துவதற்கான மேம்பட்ட உத்திகளை ஆராய்கிறது.

useState மற்றும் அதன் தாக்கங்களைப் புரிந்துகொள்ளுதல்

மேம்படுத்தல் நுட்பங்களுக்குள் செல்வதற்கு முன், useState-இன் அடிப்படைகளை நினைவுபடுத்துவோம். useState ஹூக், ஃபங்ஷனல் காம்பொனென்ட்களுக்கு ஸ்டேட் இருக்க அனுமதிக்கிறது. இது ஒரு ஸ்டேட் மாறி மற்றும் அந்த மாறியைப் புதுப்பிப்பதற்கான ஒரு ஃபங்ஷனைத் திருப்பித் தருகிறது. ஒவ்வொரு முறையும் ஸ்டேட் புதுப்பிக்கப்படும்போது, காம்பொனென்ட் மீண்டும் ரெண்டர் ஆகிறது.

அடிப்படை உதாரணம்:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
எண்ணிக்கை: {count}
       setCount(count + 1)}>அதிகரி
    
  );
}

export default Counter;

இந்த எளிய எடுத்துக்காட்டில், "Increment" பொத்தானைக் கிளிக் செய்வது count ஸ்டேட்டைப் புதுப்பித்து, Counter காம்பொனென்ட்டை மீண்டும் ரெண்டர் செய்யத் தூண்டுகிறது. இது சிறிய காம்பொனென்ட்களுக்குச் சரியாக வேலை செய்தாலும், பெரிய செயலிகளில் கட்டுப்பாடற்ற ரீ-ரெண்டர்கள் செயல்திறனை கடுமையாக பாதிக்கலாம்.

useState-ஐ ஏன் மேம்படுத்த வேண்டும்?

தேவையற்ற ரீ-ரெண்டர்களே React செயலிகளில் செயல்திறன் சிக்கல்களுக்கு முக்கிய காரணமாகும். ஒவ்வொரு ரீ-ரெண்டரும் வளங்களைப் பயன்படுத்துகிறது மற்றும் மெதுவான பயனர் அனுபவத்திற்கு வழிவகுக்கும். useState-ஐ மேம்படுத்துவது இதற்கு உதவுகிறது:

• தேவையற்ற ரீ-ரெண்டர்களைக் குறைத்தல்: காம்பொனென்ட்களின் ஸ்டேட் உண்மையில் மாறாதபோது அவை மீண்டும் ரெண்டர் ஆவதைத் தடுத்தல்.
• செயல்திறனை மேம்படுத்துதல்: உங்கள் செயலியை வேகமாகவும் பதிலளிக்கக்கூடியதாகவும் மாற்றுதல்.
• பராமரிப்பை மேம்படுத்துதல்: சுத்தமான மற்றும் திறமையான கோடை எழுதுதல்.

மேம்படுத்தல் உத்தி 1: ஃபங்ஷனல் புதுப்பிப்புகள்

முந்தைய ஸ்டேட்டின் அடிப்படையில் ஸ்டேட்டைப் புதுப்பிக்கும்போது, எப்போதும் setCount-இன் ஃபங்ஷனல் வடிவத்தைப் பயன்படுத்தவும். இது பழைய குளோஷர்களுடன் ஏற்படும் சிக்கல்களைத் தடுக்கிறது மற்றும் நீங்கள் மிகச் சமீபத்திய ஸ்டேட்டுடன் பணிபுரிவதை உறுதி செய்கிறது.

தவறானது (சிக்கலை ஏற்படுத்தக்கூடியது):

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setTimeout(() => {
      setCount(count + 1); // பழைய 'count' மதிப்பாக இருக்கலாம்
    }, 1000);
  };

  return (
    

      
எண்ணிக்கை: {count}
      அதிகரி
    
  );
}

சரியானது (ஃபங்ஷனல் புதுப்பிப்பு):

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1); // சரியான 'count' மதிப்பை உறுதி செய்கிறது
    }, 1000);
  };

  return (
    

      
எண்ணிக்கை: {count}
      அதிகரி
    
  );
}

setCount(prevCount => prevCount + 1)-ஐப் பயன்படுத்துவதன் மூலம், நீங்கள் setCount-க்கு ஒரு ஃபங்ஷனை அனுப்புகிறீர்கள். React பின்னர் ஸ்டேட் புதுப்பிப்பை வரிசைப்படுத்தி, மிகச் சமீபத்திய ஸ்டேட் மதிப்புடன் அந்த ஃபங்ஷனை இயக்கும், இதனால் பழைய குளோஷர் சிக்கலைத் தவிர்க்கலாம்.

மேம்படுத்தல் உத்தி 2: மாற்ற முடியாத ஸ்டேட் புதுப்பிப்புகள்

உங்கள் ஸ்டேட்டில் ஆப்ஜெக்ட்கள் அல்லது அரேக்களைக் கையாளும்போது, அவற்றை எப்போதும் மாற்ற முடியாத வழியில் புதுப்பிக்கவும். ஸ்டேட்டை நேரடியாக மாற்றுவது ஒரு ரீ-ரெண்டரைத் தூண்டாது, ஏனெனில் React மாற்றங்களைக் கண்டறிய ரெஃபரன்ஸ் சமத்துவத்தை நம்பியுள்ளது. பதிலாக, விரும்பிய மாற்றங்களுடன் ஆப்ஜெக்ட் அல்லது அரேவின் புதிய நகலை உருவாக்கவும்.

தவறானது (ஸ்டேட்டை மாற்றுதல்):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    const item = items.find(item => item.id === id);
    if (item) {
      item.quantity = newQuantity; // நேரடி மாற்றம்! ரீ-ரெண்டரைத் தூண்டாது.
      setItems(items); // இது சிக்கல்களை ஏற்படுத்தும் ஏனெனில் React மாற்றத்தைக் கண்டறியாது.
    }
  };

  return (
    

      {items.map(item => (
        

          {item.name} - அளவு: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>அதிகரி
        
      ))}
    
  );
}

சரியானது (மாற்ற முடியாத புதுப்பிப்பு):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  return (
    

      {items.map(item => (
        

          {item.name} - அளவு: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>அதிகரி
        
      ))}
    
  );
}

திருத்தப்பட்ட பதிப்பில், புதுப்பிக்கப்பட்ட உருப்படியுடன் ஒரு புதிய அரேவை உருவாக்க நாம் .map()-ஐப் பயன்படுத்துகிறோம். ஸ்ப்ரெட் ஆபரேட்டர் (...item) ஏற்கனவே உள்ள பண்புகளுடன் ஒரு புதிய ஆப்ஜெக்டை உருவாக்கப் பயன்படுகிறது, பின்னர் நாம் quantity பண்பை புதிய மதிப்புடன் மேலெழுதுகிறோம். இது setItems ஒரு புதிய அரேவைப் பெறுவதை உறுதி செய்கிறது, இது ஒரு ரீ-ரெண்டரைத் தூண்டி UI-ஐப் புதுப்பிக்கிறது.

மேம்படுத்தல் உத்தி 3: தேவையற்ற ரீ-ரெண்டர்களைத் தவிர்க்க `useMemo`-வைப் பயன்படுத்துதல்

useMemo ஹூக் ஒரு கணக்கீட்டின் முடிவை மெமோயிஸ் செய்யப் பயன்படுகிறது. கணக்கீடு செலவுமிக்கதாகவும், குறிப்பிட்ட ஸ்டேட் மாறிகளை மட்டுமே சார்ந்து இருக்கும்போதும் இது பயனுள்ளதாக இருக்கும். அந்த ஸ்டேட் மாறிகள் மாறவில்லை என்றால், useMemo சேமிக்கப்பட்ட முடிவைத் தரும், இது கணக்கீடு மீண்டும் இயங்குவதைத் தடுத்து தேவையற்ற ரீ-ரெண்டர்களைத் தவிர்க்கிறது.

உதாரணம்:

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const [multiplier, setMultiplier] = useState(2);

  // 'data' -ஐ மட்டுமே சார்ந்துள்ள செலவுமிக்க கணக்கீடு
  const processedData = useMemo(() => {
    console.log('தரவைச் செயலாக்குகிறது...');
    // ஒரு செலவுமிக்க செயல்பாட்டை உருவகப்படுத்துதல்
    let result = data.map(item => item * multiplier);
    return result;
  }, [data, multiplier]);

  return (
    

      
செயலாக்கப்பட்ட தரவு: {processedData.join(', ')}
       setMultiplier(multiplier + 1)}>பெருக்கியை அதிகரி
    
  );
}

function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  return (
    

      
       setData([6, 7, 8, 9, 10])}>தரவை மாற்று
    
  );
}

export default App;

இந்த எடுத்துக்காட்டில், data அல்லது multiplier மாறும்போது மட்டுமே processedData மீண்டும் கணக்கிடப்படுகிறது. ExpensiveComponent-இன் மற்ற ஸ்டேட் பகுதிகள் மாறினால், காம்பொனென்ட் மீண்டும் ரெண்டர் ஆகும், ஆனால் processedData மீண்டும் கணக்கிடப்படாது, இது செயலாக்க நேரத்தைச் சேமிக்கிறது.

மேம்படுத்தல் உத்தி 4: ஃபங்ஷன்களை மெமோயிஸ் செய்ய `useCallback`-ஐப் பயன்படுத்துதல்

useMemo-வைப் போலவே, useCallback ஃபங்ஷன்களை மெமோயிஸ் செய்கிறது. இது குறிப்பாக சைல்ட் காம்பொனென்ட்களுக்கு ஃபங்ஷன்களை ப்ராப்ஸாக அனுப்பும்போது பயனுள்ளதாக இருக்கும். useCallback இல்லாமல், ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய ஃபங்ஷன் இன்ஸ்டன்ஸ் உருவாக்கப்படுகிறது, இது சைல்ட் காம்பொனென்ட்டின் ப்ராப்ஸ் உண்மையில் மாறாவிட்டாலும் அதை மீண்டும் ரெண்டர் செய்ய வைக்கிறது. ஏனெனில் React ப்ராப்ஸ் வேறுபட்டதா என்பதை ஸ்டிரிக்ட் சமத்துவத்தைப் (===) பயன்படுத்தி சரிபார்க்கிறது, மேலும் ஒரு புதிய ஃபங்ஷன் முந்தையதிலிருந்து எப்போதும் வேறுபட்டதாக இருக்கும்.

உதாரணம்:

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, children }) => {
  console.log('பட்டன் ரெண்டர் செய்யப்பட்டது');
  return {children};
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  // increment ஃபங்ஷனை மெமோயிஸ் செய்தல்
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // காலி டிபென்டென்சி அரே என்பது இந்த ஃபங்ஷன் ஒரு முறை மட்டுமே உருவாக்கப்படுகிறது என்பதைக் குறிக்கிறது

  return (
    

      
எண்ணிக்கை: {count}
      அதிகரி
    
  );
}

export default ParentComponent;

இந்த எடுத்துக்காட்டில், increment ஃபங்ஷன் ஒரு காலி டிபென்டென்சி அரேயுடன் useCallback-ஐப் பயன்படுத்தி மெமோயிஸ் செய்யப்படுகிறது. இதன் பொருள், காம்பொனென்ட் மவுன்ட் ஆகும்போது இந்த ஃபங்ஷன் ஒரு முறை மட்டுமே உருவாக்கப்படுகிறது. Button காம்பொனென்ட் React.memo-வில் சுற்றப்பட்டிருப்பதால், அதன் ப்ராப்ஸ் மாறினால் மட்டுமே அது மீண்டும் ரெண்டர் ஆகும். increment ஃபங்ஷன் ஒவ்வொரு ரெண்டரிலும் ஒரே மாதிரியாக இருப்பதால், Button காம்பொனென்ட் தேவையற்ற முறையில் மீண்டும் ரெண்டர் ஆகாது.

மேம்படுத்தல் உத்தி 5: ஃபங்ஷனல் காம்பொனென்ட்களுக்கு `React.memo`-வைப் பயன்படுத்துதல்

React.memo என்பது ஃபங்ஷனல் காம்பொனென்ட்களை மெமோயிஸ் செய்யும் ஒரு உயர்-வரிசை காம்பொனென்ட் ஆகும். இது ஒரு காம்பொனென்ட்டின் ப்ராப்ஸ் மாறாத பட்சத்தில் அது மீண்டும் ரெண்டர் ஆவதைத் தடுக்கிறது. இது தங்கள் ப்ராப்ஸை மட்டுமே சார்ந்து இருக்கும் தூய காம்பொனென்ட்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும்.

உதாரணம்:

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('MyComponent ரெண்டர் செய்யப்பட்டது');
  return 
வணக்கம், {name}!
;
});

export default MyComponent;

React.memo-ஐ திறம்பட பயன்படுத்த, உங்கள் காம்பொனென்ட் தூய்மையானது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள், அதாவது அது எப்போதும் ஒரே உள்ளீட்டு ப்ராப்ஸிற்கு ஒரே வெளியீட்டை ரெண்டர் செய்கிறது. உங்கள் காம்பொனென்ட்டில் பக்க விளைவுகள் இருந்தாலோ அல்லது மாறக்கூடிய கான்டெக்ஸ்டை நம்பியிருந்தாலோ, React.memo சிறந்த தீர்வாக இருக்காது.

மேம்படுத்தல் உத்தி 6: பெரிய காம்பொனென்ட்களைப் பிரித்தல்

சிக்கலான ஸ்டேட்டைக் கொண்ட பெரிய காம்பொனென்ட்கள் செயல்திறன் தடைகளாக மாறக்கூடும். இந்தக் காம்பொனென்ட்களை சிறிய, மேலும் நிர்வகிக்கக்கூடிய பகுதிகளாகப் பிரிப்பது ரீ-ரெண்டர்களைத் தனிமைப்படுத்துவதன் மூலம் செயல்திறனை மேம்படுத்தும். பயன்பாட்டின் ஒரு பகுதி ஸ்டேட் மாறும்போது, முழு பெரிய காம்பொனென்ட்டிற்கும் பதிலாக, தொடர்புடைய சப்-காம்பொனென்ட் மட்டுமே மீண்டும் ரெண்டர் செய்யப்பட வேண்டும்.

உதாரணம் (கருத்தியல்):

பயனர் தகவல் மற்றும் செயல்பாட்டு ஊட்டத்தைக் கையாளும் ஒரு பெரிய UserProfile காம்பொனென்ட்டிற்கு பதிலாக, அதை UserInfo மற்றும் ActivityFeed என இரண்டு காம்பொனென்ட்களாகப் பிரிக்கவும். ஒவ்வொரு காம்பொனென்ட்டும் அதன் சொந்த ஸ்டேட்டை நிர்வகிக்கிறது மற்றும் அதன் குறிப்பிட்ட தரவு மாறும்போது மட்டுமே மீண்டும் ரெண்டர் ஆகிறது.

மேம்படுத்தல் உத்தி 7: சிக்கலான ஸ்டேட் லாஜிக்கிற்கு `useReducer`-ஐப் பயன்படுத்துதல்

சிக்கலான ஸ்டேட் மாற்றங்களைக் கையாளும்போது, useReducer என்பது useState-க்கு ஒரு சக்திவாய்ந்த மாற்றாக இருக்க முடியும். இது ஸ்டேட்டை நிர்வகிக்க ஒரு கட்டமைக்கப்பட்ட வழியை வழங்குகிறது மற்றும் பெரும்பாலும் சிறந்த செயல்திறனுக்கு வழிவகுக்கும். useReducer ஹூக், பல துணை-மதிப்புகளைக் கொண்ட சிக்கலான ஸ்டேட் லாஜிக்கை நிர்வகிக்கிறது, இது ஆக்சன்களின் அடிப்படையில் நுணுக்கமான புதுப்பிப்புகள் தேவைப்படும்.

உதாரணம்:

import React, { useReducer } from 'react';

const initialState = { count: 0, theme: 'light' };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'toggleTheme':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      
எண்ணிக்கை: {state.count}
      
தீம்: {state.theme}
       dispatch({ type: 'increment' })}>அதிகரி
       dispatch({ type: 'decrement' })}>குறை
       dispatch({ type: 'toggleTheme' })}>தீம் மாற்று
    
  );
}

export default Counter;

இந்த எடுத்துக்காட்டில், reducer ஃபங்ஷன் ஸ்டேட்டைப் புதுப்பிக்கும் வெவ்வேறு ஆக்சன்களைக் கையாள்கிறது. useReducer ரெண்டரிங்கை மேம்படுத்தவும் உதவக்கூடும், ஏனெனில் மெமோயிசேஷன் மூலம் ஸ்டேட்டின் எந்தப் பகுதிகள் காம்பொனென்ட்களை ரெண்டர் செய்ய வைக்கின்றன என்பதை நீங்கள் கட்டுப்படுத்தலாம், இது பல `useState` ஹூக்குகளால் ஏற்படக்கூடிய பரவலான ரீ-ரெண்டர்களுடன் ஒப்பிடும்போது சிறந்ததாகும்.

மேம்படுத்தல் உத்தி 8: தேர்ந்தெடுக்கப்பட்ட ஸ்டேட் புதுப்பிப்புகள்

சில நேரங்களில், உங்களிடம் பல ஸ்டேட் மாறிகளைக் கொண்ட ஒரு காம்பொனென்ட் இருக்கலாம், ஆனால் அவற்றில் சில மட்டுமே மாறும்போது ஒரு ரீ-ரெண்டரைத் தூண்டும். இந்த சந்தர்ப்பங்களில், நீங்கள் பல useState ஹூக்குகளைப் பயன்படுத்தி ஸ்டேட்டைத் தேர்ந்தெடுத்துப் புதுப்பிக்கலாம். இது உண்மையில் புதுப்பிக்கப்பட வேண்டிய காம்பொனென்ட்டின் பகுதிகளுக்கு மட்டுமே ரீ-ரெண்டர்களைத் தனிமைப்படுத்த உங்களை அனுமதிக்கிறது.

உதாரணம்:

import React, { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [location, setLocation] = useState('New York');

  // இடம் மாறும்போது மட்டும் இடத்தைப் புதுப்பித்தல்
  const handleLocationChange = (newLocation) => {
    setLocation(newLocation);
  };

  return (
    

      
பெயர்: {name}
      
வயது: {age}
      
இடம்: {location}
       handleLocationChange('London')}>இடத்தை மாற்று
    
  );
}

export default MyComponent;

இந்த எடுத்துக்காட்டில், location-ஐ மாற்றுவது location-ஐக் காட்டும் காம்பொனென்ட்டின் பகுதியை மட்டுமே மீண்டும் ரெண்டர் செய்யும். name மற்றும் age ஸ்டேட் மாறிகள் வெளிப்படையாகப் புதுப்பிக்கப்படாவிட்டால் காம்பொனென்ட்டை மீண்டும் ரெண்டர் செய்யாது.

மேம்படுத்தல் உத்தி 9: ஸ்டேட் புதுப்பிப்புகளை டிபவுன்சிங் மற்றும் த்ராட்லிங் செய்தல்

ஸ்டேட் புதுப்பிப்புகள் அடிக்கடி தூண்டப்படும் சூழ்நிலைகளில் (எ.கா., பயனர் உள்ளீட்டின் போது), டிபவுன்சிங் மற்றும் த்ராட்லிங் ரீ-ரெண்டர்களின் எண்ணிக்கையைக் குறைக்க உதவும். டிபவுன்சிங் ஒரு ஃபங்ஷன் கடைசியாக அழைக்கப்பட்டதிலிருந்து ஒரு குறிப்பிட்ட அளவு நேரம் கடந்த பிறகு ஃபங்ஷன் அழைப்பை தாமதப்படுத்துகிறது. த்ராட்லிங் ஒரு குறிப்பிட்ட காலத்திற்குள் ஒரு ஃபங்ஷன் எத்தனை முறை அழைக்கப்படலாம் என்பதைக் கட்டுப்படுத்துகிறது.

உதாரணம் (டிபவுன்சிங்):

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce'; // lodash-ஐ நிறுவவும்: npm install lodash

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  const debouncedSetSearchTerm = useCallback(
    debounce((text) => {
      setSearchTerm(text);
      console.log('தேடல் சொல் புதுப்பிக்கப்பட்டது:', text);
    }, 300),
    []
  );

  const handleInputChange = (event) => {
    debouncedSetSearchTerm(event.target.value);
  };

  return (
    

      
      
தேடுவது: {searchTerm}
    
  );
}

export default SearchComponent;

இந்த எடுத்துக்காட்டில், Lodash-இன் debounce ஃபங்ஷன் setSearchTerm ஃபங்ஷன் அழைப்பை 300 மில்லி விநாடிகளுக்கு தாமதப்படுத்தப் பயன்படுகிறது. இது ஒவ்வொரு கீஸ்டுரோக்கிலும் ஸ்டேட் புதுப்பிக்கப்படுவதைத் தடுக்கிறது, இது ரீ-ரெண்டர்களின் எண்ணிக்கையைக் குறைக்கிறது.

மேம்படுத்தல் உத்தி 10: தடையற்ற UI புதுப்பிப்புகளுக்கு `useTransition`-ஐப் பயன்படுத்துதல்

முக்கிய த்ரெட்டைத் தடுத்து UI உறைதல்களை ஏற்படுத்தக்கூடிய பணிகளுக்கு, useTransition ஹூக் ஸ்டேட் புதுப்பிப்புகளை அவசரமற்றவை எனக் குறிக்கப் பயன்படுகிறது. React பின்னர் பயனர் தொடர்புகள் போன்ற பிற பணிகளுக்கு முன்னுரிமை அளித்து, அவசரமற்ற ஸ்டேட் புதுப்பிப்புகளைச் செயலாக்கும். இது கணக்கீட்டு ரீதியாக தீவிரமான செயல்பாடுகளைக் கையாளும்போதும் ஒரு மென்மையான பயனர் அனுபவத்தை விளைவிக்கிறது.

உதாரணம்:

import React, { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const loadData = () => {
    startTransition(() => {
      // ஒரு API-லிருந்து தரவைப் ஏற்றுவதை உருவகப்படுத்துதல்
      setTimeout(() => {
        setData([1, 2, 3, 4, 5]);
      }, 1000);
    });
  };

  return (
    

      
        {isPending ? 'ஏற்றுகிறது...' : 'தரவை ஏற்று'}
      
      {isPending && 
தரவு ஏற்றப்படுகிறது...
}
      {data.length > 0 && 
தரவு: {data.join(', ')}
}
    
  );
}

export default MyComponent;

இந்த எடுத்துக்காட்டில், startTransition ஃபங்ஷன் setData அழைப்பை அவசரமற்றது எனக் குறிக்கப் பயன்படுகிறது. React பின்னர் ஏற்றுதல் நிலையைக் காட்டும் UI-ஐப் புதுப்பிப்பது போன்ற பிற பணிகளுக்கு முன்னுரிமை அளித்து, ஸ்டேட் புதுப்பிப்பைச் செயலாக்கும். isPending கொடி, மாற்றம் செயல்பாட்டில் உள்ளதா என்பதைக் குறிக்கிறது.

மேம்பட்ட பரிசீலனைகள்: கான்டெக்ஸ்ட் மற்றும் குளோபல் ஸ்டேட் மேலாண்மை

பகிரப்பட்ட ஸ்டேட்டைக் கொண்ட சிக்கலான செயலிகளுக்கு, React Context அல்லது Redux, Zustand, அல்லது Jotai போன்ற ஒரு குளோபல் ஸ்டேட் மேலாண்மை லைப்ரரியைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும். இந்த தீர்வுகள் ஸ்டேட்டை நிர்வகிக்கவும், காம்பொனென்ட்கள் தங்களுக்குத் தேவையான ஸ்டேட்டின் குறிப்பிட்ட பகுதிகளுக்கு மட்டும் குழுசேர அனுமதிப்பதன் மூலம் தேவையற்ற ரீ-ரெண்டர்களைத் தடுக்கவும் திறமையான வழிகளை வழங்க முடியும்.

முடிவுரை

செயல்திறன் மிக்க மற்றும் பராமரிக்கக்கூடிய React செயலிகளை உருவாக்க useState-ஐ மேம்படுத்துவது மிக முக்கியம். ஸ்டேட் மேலாண்மையின் நுணுக்கங்களைப் புரிந்துகொண்டு, இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள நுட்பங்களைப் பயன்படுத்துவதன் மூலம், உங்கள் React செயலிகளின் செயல்திறனையும் பதிலளிக்கும் தன்மையையும் கணிசமாக மேம்படுத்தலாம். செயல்திறன் தடைகளைக் கண்டறிய உங்கள் செயலியை சுயவிவரப்படுத்த நினைவில் கொள்ளுங்கள் மற்றும் உங்கள் குறிப்பிட்ட தேவைகளுக்கு மிகவும் பொருத்தமான மேம்படுத்தல் உத்திகளைத் தேர்ந்தெடுக்கவும். உண்மையான செயல்திறன் சிக்கல்களை அடையாளம் காணாமல் முன்கூட்டியே மேம்படுத்த வேண்டாம். முதலில் சுத்தமான, பராமரிக்கக்கூடிய கோடை எழுதுவதில் கவனம் செலுத்துங்கள், பின்னர் தேவைக்கேற்ப மேம்படுத்துங்கள். செயல்திறனுக்கும் கோட் வாசிப்புத்தன்மைக்கும் இடையில் ஒரு சமநிலையை ஏற்படுத்துவதே முக்கியமாகும்.